<template>
	<view class="emoji-animal">
		<swiper :duration="500" @change.stop="changeIndex">
			<swiper-item class="swiper-item">
				<view class="emoji-animal-a1">
					<view @tap.stop="checkEmoji(index)" class="emoji-animal-a1-b1" v-for="(item, index) in emoji1" :key="index">
						<view class="emoji-animal-a1-b1-c1">
							<image class="emoji-animal-a1-b1-c1-d1" :src="item | formatImageUrl" mode=""></image>
						</view>
					</view>
				</view>
			</swiper-item>
		</swiper>
		<view class="emoji-animal-a2">
			<view class="emoji-animal-a2-b1" :class="[index == 0 ? 'active':'']"></view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				emoji1:['f0/xhrnew_weixiao_org.png','63/xhrnew_jiandaoshou_org.png','b2/xhrnew_buxie_org.png','41/xhrnew_gaoxing_org.png','fd/xhrnew_jingya_thumb.png','79/xhrnew_weiqu_org.png','be/xhrnew_huaixiao_thumb.png','e2/xhrnew_baiyan_org.png','15/xhrnew_wunai_org.png','c8/xhrnew_deyi_org.png'],
				index:0,
				stickerDesc:["[小黄人-微笑]","[小黄人-剪刀手]","[小黄人-不屑]","[小黄人-高兴]","[小黄人-惊讶]","[小黄人-委屈]","[小黄人-坏笑]","[小黄人-白眼]","[小黄人-无奈]","[小黄人-得意]"]
				
			};
		},
		props:{
			addEmoji:Function
		},
		filters:{
			formatImageUrl:function(item){
				return `https://face.t.sinajs.cn/t4/appstyle/expression/ext/normal/${item}`
			}
			
		},
		methods:{
			checkEmoji(index){
				this.addEmoji(this.stickerDesc[index])
			},
			changeIndex(e){
				this.index = e.detail.current
			}
		}
	}
</script>

<style>
	.emoji-animal-a1-b1-c1-d1{
		width: 100%;
		height: 100%;
	}
	.emoji-animal-a1-b1-c1{
		width: 108rpx;
		height: 108rpx;
	}
	.emoji-animal-a2 .active{
		background-color: #46aef7;
	}
	.emoji-animal-a1-b1{
		padding: 12rpx 0;
		flex-basis: 20%;
		/* height: 64rpx; */
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 64rpx;
	}
	.emoji-animal-a1{
		width: 100%;
		display: flex;
		flex-wrap: wrap;
	}
	.emoji-animal-a2{
		position: absolute;
		bottom: 0;
		height: 30rpx;
		width: 100%;
		font-size: 0;
		background-color: #fff;
		display: flex;
		justify-content: center;
		align-items: center;
	}
	.emoji-animal-a2-b1{
		width: 10rpx;
		height: 10rpx;
		margin: 0 4rpx;
		border-radius: 50%;
		background-color: #e2e2e2;
	}
	.emoji-animal{
		width: 100%;
		height: 308rpx;
		overflow: hidden;
		position: relative;
	}
</style>